<!doctype html>
<html lang="en" class="page-type-section">
<head prefix="og: http://ogp.me/ns#">
<meta charset="utf-8">
<title>模板 + 数据模型 = 输出 - FreeMarker 手册</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="format-detection" content="telephone=no">
<meta property="og:site_name" content="FreeMarker 手册">
<meta property="og:title" content="模板 + 数据模型 = 输出">
<meta property="og:locale" content="en_US">
<meta property="og:url" content="http://freemarker.org/docs/dgui_quickstart_basics.html">
<link rel="canoical" href="http://freemarker.org/docs/dgui_quickstart_basics.html">
<link rel="icon" href="favicon.png" type="image/png">
<link rel="stylesheet" type="text/css" href="docgen-resources/docgen.min.css">
</head>
<body itemscope itemtype="https://schema.org/Code">
    <meta itemprop="url" content="http://freemarker.org/docs/">
    <meta itemprop="name" content="FreeMarker 手册">

  <!--[if lte IE 9]>
  <div style="background-color: #C00; color: #fff; padding: 12px 24px;">Please use a modern browser to view this website.</div>
  <![endif]--><div class="header-top-bg"><div class="site-width header-top"><a class="logo" href="http://freemarker.org" role="banner">            <img itemprop="image" src="logo.png" alt="FreeMarker">
</a><ul class="tabs"><li><a href="http://freemarker.org/">Home</a></li><li class="current"><a href="index.html">Manual</a></li><li><a class="external" href="http://freemarker.org/docs/api/index.html">Java API</a></li></ul><ul class="secondary-tabs"><li><a class="tab icon-heart" href="http://freemarker.org/contribute.html" title="Contribute"><span>Contribute</span></a></li><li><a class="tab icon-bug" href="https://sourceforge.net/p/freemarker/bugs/new/" title="Report a Bug"><span>Report a Bug</span></a></li><li><a class="tab icon-download" href="http://freemarker.org/freemarkerdownload.html" title="Download"><span>Download</span></a></li></ul></div></div><div class="header-bottom-bg"><div class="site-width search-row"><a href="toc.html" class="navigation-header">Manual</a><div class="navigation-header"></div></div><div class="site-width breadcrumb-row"><ul class="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList"><li class="step-0" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a class="label" itemprop="item" href="toc.html"><span itemprop="name">FreeMarker 手册</span></a></li><li class="step-1" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a class="label" itemprop="item" href="dgui.html"><span itemprop="name">模板开发指南</span></a></li><li class="step-2" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a class="label" itemprop="item" href="dgui_quickstart.html"><span itemprop="name">入门</span></a></li><li class="step-3" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a class="label" itemprop="item" href="dgui_quickstart_basics.html"><span itemprop="name">模板 + 数据模型 = 输出</span></a></li></ul><div class="bookmarks" title="Bookmarks"><span class="sr-only">Bookmarks:</span><ul class="bookmark-list"><li><a href="alphaidx.html">Alpha. index</a></li><li><a href="gloss.html">Glossary</a></li><li><a href="dgui_template_exp.html#exp_cheatsheet">Expressions</a></li><li><a href="ref_builtins_alphaidx.html">?builtins</a></li><li><a href="ref_directive_alphaidx.html">#directives</a></li><li><a href="ref_specvar.html">.spec_vars</a></li><li><a href="app_faq.html">FAQ</a></li></ul></div></div></div>    <div class="main-content site-width">
      <div class="content-wrapper">
  <div id="table-of-contents-wrapper" class="col-left">
      <script>var breadcrumb = ["FreeMarker 手册","模板开发指南","入门","模板 + 数据模型 = 输出"];</script>
      <script src="toc.js"></script>
      <script src="docgen-resources/main.min.js"></script>
  </div>
<div class="col-right"><div class="page-content"><div class="page-title"><div class="pagers top"><a class="paging-arrow previous" href="dgui_quickstart.html"><span>Previous</span></a><a class="paging-arrow next" href="dgui_quickstart_datamodel.html"><span>Next</span></a></div><div class="title-wrapper">
<h1 class="content-header header-section1" id="dgui_quickstart_basics" itemprop="headline">模板 + 数据模型 = 输出</h1>
</div></div><p>假设在一个在线商店的应用系统中需要一个HTML页面，和下面这个页面类似：</p>

<div class="code-wrapper"><pre class="code-block code-output">&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;Welcome!&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h1&gt;Welcome <strong>John Doe</strong>!&lt;/h1&gt;
  &lt;p&gt;Our latest product:
  &lt;a href=&quot;<strong>products/greenmouse.html</strong>&quot;&gt;<strong>green mouse</strong>&lt;/a&gt;!
&lt;/body&gt;
&lt;/html&gt;</pre></div><p>这里的用户名(上面的&quot;Big Joe&quot;)，应该是登录这个网页的访问者的名字，
		并且最新产品的数据应该来自于数据库，这样它才能随时更新。那么不能直接在HTML页面中输入它们，
		不能使用静态的HTML代码。此时，可以使用要求输出的 <strong>模板</strong>。
		模板和静态HTML是相同的，只是它会包含一些 FreeMarker 将它们变成动态内容的指令：</p>

<div class="code-wrapper"><pre class="code-block code-template"><a name="example.first"></a>&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;Welcome!&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h1&gt;Welcome <strong>${user}</strong>!&lt;/h1&gt;
  &lt;p&gt;Our latest product:
  &lt;a href=&quot;<strong>${latestProduct.url}</strong>&quot;&gt;<strong>${latestProduct.name}</strong>&lt;/a&gt;!
&lt;/body&gt;
&lt;/html&gt;</pre></div><p>模板文件存放在Web服务器上，就像通常存放静态HTML页面那样。当有人来访问这个页面，
		FreeMarker将会介入执行，然后动态转换模板，用最新的数据内容替换模板中
        <code class="inline-code">${<em class="code-color">...</em>}</code> 的部分，
		之后将结果发送到访问者的Web浏览器中。访问者的Web浏览器就会接收到例如第一个HTML示例那样的内容
		(也就是没有FreeMarker指令的HTML代码)，访问者也不会察觉到服务器端使用的FreeMarker。
		(当然，存储在Web服务器端的模板文件是不会被修改的；替换也仅仅出现在Web服务器的响应中。)</p><p>请注意，模板并没有包含程序逻辑来查找当前的访问者是谁，或者去查询数据库获取最新的产品。
		显示的数据是在 FreeMarker 之外准备的，通常是一些 "真正的" 编程语言(比如Java)
		所编写的代码。模板作者无需知道这些值是如何计算出的。事实上，这些值的计算方式可以完全被修改，
		而模板可以保持不变，而且页面的样式也可以完全被修改而无需改动模板。
		当模板作者(设计师)和程序员不是同一人时，显示逻辑和业务逻辑相分离的做法是非常有用的，
		即便模板作者和程序员是一个人，这么来做也会帮助管理应用程序的复杂性。
		保证模板专注于显示问题(视觉设计，布局和格式化)是高效使用模板引擎的关键。</p><p>为模板准备的数据整体被称作为 <strong>数据模型</strong>。
		  模板作者要关心的是，数据模型是树形结构(就像硬盘上的文件夹和文件)，在视觉效果上，
		  数据模型可以是：</p>

<div class="code-wrapper"><pre class="code-block code-data-model">(root)
  |
  +- <strong>user</strong> = &quot;Big Joe&quot;
  |
  +- <strong>latestProduct</strong>
      |
      +- <strong>url</strong> = &quot;products/greenmouse.html&quot;
      |
      +- <strong>name</strong> = &quot;green mouse&quot;</pre></div>  <div class="callout note">
    <strong class="callout-label">Note:</strong>

          <p>上面只是一个形象化显示；数据模型不是文本格式，它来自于Java对象。
		  对于Java程序员来说，root就像一个有 <code class="inline-code">getUser()</code> 
		  和 <code class="inline-code">getLatestProduct()</code> 方法的Java对象，
		  也可以有 <code class="inline-code">&quot;user&quot;</code> 和 <code class="inline-code">&quot;latestProducts&quot;</code> 
		  键值的Java <code class="inline-code">Map</code>对象。相似地，<code class="inline-code">latestProduct</code>
		  就像是有 <code class="inline-code">getUrl()</code> 和  <code class="inline-code">getName()</code> 方法的Java对象。</p>
          </div>
<p>早期版本中，可以从数据模型中选取这些值，使用 <code class="inline-code">user</code> 
		和 <code class="inline-code">latestProduct.name</code> 表达式即可。如果我们继续类推，
		数据模型就像一个文件系统，那么 "(root)" 和 <code class="inline-code">latestProduct</code>
		就对应着目录(文件夹)，而 <code class="inline-code">user</code>, <code class="inline-code">url</code> 和
        <code class="inline-code">name</code> 就是这些目录中的文件。</p><p>总的来说，模板和数据模型是FreeMarker来生成输出(比如第一个展示的HTML)所必须的：</p><p><span class="marked-template">模板</span> + <span class="marked-data-model">数据模型</span> = <span class="marked-output">输出</span></p><div class="bottom-pagers-wrapper"><div class="pagers bottom"><a class="paging-arrow previous" href="dgui_quickstart.html"><span>Previous</span></a><a class="paging-arrow next" href="dgui_quickstart_datamodel.html"><span>Next</span></a></div></div></div></div>      </div>
    </div>
<div class="site-footer"><div class="site-width"><div class="footer-top"><div class="col-left sitemap"><div class="column"><h3 class="column-header">Overview</h3><ul><li><a href="http://freemarker.org/index.html">What is FreeMarker?</a></li><li><a href="http://freemarker.org/freemarkerdownload.html">Download</a></li><li><a href="app_versions.html">Version history</a></li><li><a href="http://freemarker.org/history.html">About us</a></li><li><a itemprop="license" href="app_license.html">License</a></li></ul></div><div class="column"><h3 class="column-header">Handy stuff</h3><ul><li><a href="http://freemarker-online.kenshoo.com/">Try template online</a></li><li><a href="dgui_template_exp.html#exp_cheatsheet">Expressions cheatsheet</a></li><li><a href="ref_directive_alphaidx.html">#directives</a></li><li><a href="ref_builtins_alphaidx.html">?built_ins</a></li><li><a href="ref_specvar.html">.special_vars</a></li></ul></div><div class="column"><h3 class="column-header">Community</h3><ul><li><a href="https://github.com/nanlei/freemarker/tree/manual-zh-2.3-gae/src/manual">Chinese Manual on Github</a></li><li><a href="https://github.com/freemarker/freemarker">FreeMarker on Github</a></li><li><a href="https://twitter.com/freemarker">Follow us on Twitter</a></li><li><a href="https://sourceforge.net/p/freemarker/bugs/new/">Report a bug</a></li><li><a href="http://stackoverflow.com/questions/ask?tags=freemarker">Ask a question</a></li><li><a href="http://freemarker.org/mailing-lists.html">Mailing lists</a></li></ul></div></div><div class="col-right"><ul class="social-icons"><li><a class="github" href="https://github.com/freemarker/freemarker">Github</a></li><li><a class="twitter" href="https://twitter.com/freemarker">Twitter</a></li><li><a class="stack-overflow" href="http://stackoverflow.com/questions/ask?tags=freemarker">Stack Overflow</a></li></ul><a class="xxe" href="http://www.xmlmind.com/xmleditor/" rel="nofollow" title="Edited with XMLMind XML Editor"><span>Edited with XMLMind XML Editor</span></a></div></div><div class="footer-bottom"><p><span class="generated-for-product">Generated for: Freemarker 2.3.23</span><span class="last-updated"> Last generated:
<time itemprop="dateModified" datetime="2015-09-18T14:38:51Z" title="Friday, September 18, 2015 2:38:51 PM GMT">2015-09-18 14:38:51 GMT</time></span></p> <p class="copyright">
© <span itemprop="copyrightYear">1999</span>–2015
<a itemtype="http://schema.org/Organization" itemprop="copyrightHolder" href="http://freemarker.org">The FreeMarker Project</a>. All rights reserved. </p>
</div></div></div></body>
</html>
